import { Component } from 'react';
import { Boxs,Group,Context, Card , List,Button,Grid,Toast } from 'saltui';
import Icon from 'salt-icon';
import Setting from 'salt-icon/lib/Setting';
import ToastError from 'salt-icon/lib/ToastError';
import './PageHome.less';
import  $  from 'jquery';
import  Ajax  from '../../../../Common/Ajax';
import  Lang  from './Lang';
import  NumberTool  from '../../../../tool/NumberTool';
import  roomCreateMock  from '../../../mock/roomCreateMock';

const { HBox, VBox, Box } = Boxs;




export default class RoomCreate extends  React.Component  {

  constructor(props) {
    super(props);



    this.state = {
       level:[],
       uid:1
    };


  }

  componentDidMount() {
    let sussce = (data) =>{
      this.setState({
        level:data
      })
    }
    Ajax.post("floor/lists",{},sussce);

  }

  handSave(e){

    Toast.show({
      type: 'loading',
      content: '保存中...',
      autoHide:false
    });

    setTimeout(() => {
      Ajax.post("floor/save",this.state);
      Toast.hide(() => {
      });

      Toast.show({
        type: 'loading',
        content: '保存成功',
      });



    }, 2000);



  }


  handAddRoom(event) {
   let level = this.state.level;
    let  i = level.length;
    i = i+1;
    let data =  {
      name:i+'L',
      subs:[]
    };
    for(let a=1;a<21;a++){
      data.subs.push({value:NumberTool.zero(i,2)+NumberTool.zero(a,2),'class':"demo room-create-number",is:0})
    }
    level.push(data);
    this.setState({level: level});
  }

  handDelRoom(id,event){
    let level = this.state.level;
    level.splice(id,1);
    this.setState({level: level})
  }

  create(topid,id,e) {

    let level = this.state.level;

    level[topid].subs[id].is ? level[topid].subs[id].is = 0 :level[topid].subs[id].is = 1;
    level[topid].subs[id].is ? level[topid].subs[id].class = "demo room-create-number-click" : level[topid].subs[id].class = "demo room-create-number";
    this.setState({level: level})
    console.info(this.state.level);
  }

  render() {

    var that = this;
    return (<div>
      <div className="card-wrap">
        <Card className="card-example t-MT10">
          <div className="t-MB10 t-ML10   lineByRem"><h1 className="t-PT10">{Lang.create}</h1></div>
          <hr/>


          <HBox vAlign="center">
            <Box>
              <div className="section-content room-create-manage">
                <Button type="primary"  size="small" onClick={(e) => this.handAddRoom(e)} >{Lang.add}</Button>
                <Button type="primary"  size="small" onClick={(e) => this.handSave(e)} >{Lang.save}</Button>
                </div>
            </Box>
          </HBox>
          <Group className="demo-t-list room-create-level">
            <Group.List lineIndent={80}>
              {
                this.state.level.map((L,indexs) =>
                  <div className="demo3-t-list-wrap ">
                    <div className="t-MB10 t-ML10   lineByRem"><h1 className="t-PT10">{L.name}</h1></div>
                    <ToastError onClick={(e) => this.handDelRoom(indexs,e)} className="coin-del" width="14" height="14" fill="#4d9df0" />
                    <HBox vAlign="center">
                      <HBox flex={1}>

                        <Box className="demo3-t-list-text-content"  flex={1}>
                          <Grid col={20} className="t-BCf" square touchable    >
                            {
                              L.subs.map((rooms,index) =>
                                <div onClick={(e) => this.create(indexs,index,e)}  className={rooms.class} >
                                  {rooms.value}
                                </div>
                              )
                            }
                          </Grid>
                        </Box>
                      </HBox>
                    </HBox>
                  </div>
                )
              }



            </Group.List>
          </Group>

        </Card>
      </div>
    </div>);
  }
}

